<template>
  <van-grid style="background: #fff">
    <van-grid-item
      v-for="item of list"
      :key="item.name"
      :icon="item.icon"
      :text="item.title"
      @click="handleGo(item)"
    ></van-grid-item>
  </van-grid>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { useUserStore } from '@/store/index';
  import { menuArr } from '../../data';

  const router = useRouter();

  const { userType } = useUserStore();
  const list = ref<any[]>([]);

  const getKeys = () => {
    if (userType === 'driver') {
      return [1, 5, 6, 7];
    }

    if (userType === 'dispatch') {
      return [1, 4, 3, 6, 8, 2];
    }

    if (userType === 'normal') {
      return [1, 6];
    }

    return [1, 4, 2, 3];
  };

  const getList = () => {
    const keys = getKeys();
    const iconList = keys
      .map((t) => {
        return menuArr.find((m) => m.key === t);
      })
      .filter((t) => t);

    return iconList;
  };
  list.value = getList();

  const handleGo = (item: any) => {
    router.push(item.name);
  };
</script>

<style lang="less" scoped></style>
